<template>
    <div class="mine-shopsettle">
        <van-nav-bar :title="voiceItem.filg == 1 ? '添加设备' : '编辑设备'" left-arrow fixed @click-left="onClickLeft" />

        <van-field :label="msg==1?'水机经营状态':'云喇叭状态'" readonly style="background: #F8F8F8;width: 95%;margin: 0 auto;border-radius: .16rem;">
            <template #button>
                <van-switch active-color="#67C23A" inactive-color="#DCDFE6" :active-value="1" :inactive-value="0"
                    size="20" v-model="status" @change="switchChange" />
            </template>
        </van-field>

        <van-field v-model="name" name="name" :label="msg==1?'水机名称':'云喇叭名称'" :placeholder="msg==1?'请输入水机名称':'请输入云喇叭名称'" input-align="right">
        </van-field>
        <!-- @click="startScanning" -->
        <van-field v-model="deviceId" :disabled="voiceItem.filg == 0" name="deviceId" :label="msg==1?'水机ID':'云喇叭编码'" placeholder="请扫码获取设备号"
            input-align="right" @click="startScanning" right-icon="scan" readonly>
            <!-- right-icon="scan" -->
        </van-field>

        <div class="tips">扫描设备的二维码即可获取</div>

        <div id="reader" style="width: 100%; height: 500px; display: none;"></div> <!-- 扫码区域 -->

        <van-button @click="onSubmit" style="width: 80%;margin: .5rem auto;" round block type="info"
            color="linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%)">保存</van-button>
        <van-button v-if="voiceItem.filg == 0" color="#1D69E4" plain @click="show = true" style="width: 80%;margin: 0 auto;"
            round block type="info">解绑</van-button>
        <van-popup v-model="show" :style="{ width: '70%' }" round>
            <div class="popup_title">
                <div class="msg-title">
                    <div
                        style="text-align: center;font-size: 0.28rem;font-weight: 500; margin-bottom: 0.2rem;color: #333;margin-top: -0.3rem;">
                        温馨提示</div>
                    <p>{{ msg==1?'该设备解绑后，所发生的相关交易均不再跟自己发生关联，且可被其它商家进行绑定，请确认是否解绑？':'是否确认解绑？' }}</p>
                </div>
            </div>

            <div class="popup_btn_list">
                <van-button class="popup_btn" size="small" round @click="show = false">取消</van-button>
                <van-button class="popup_btn" type="primary" size="small"
                    color="linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%)" round @click="Unbind">解绑</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Html5Qrcode } from "html5-qrcode";

export default {
    data() {
        return {
            id: this.$route.query.id,
            msg: this.$route.query.msg,
            status: 0,
            name: '',
            ids: '',
            deviceId: '', // 用于存储设备号
            html5QrCode: null, // Html5Qrcode 实例
            isScanning: false, // 记录是否正在扫描
            voiceItem: {},
            show: false
        };
    },
    mounted() {
        this.voiceItem = JSON.parse(localStorage.getItem('voiceItem'))
        // console.log(JSON.parse(localStorage.getItem('voiceItem')));
        if (JSON.parse(localStorage.getItem('voiceItem'))) {
            document.title = this.voiceItem.filg == 1 ? '添加设备' : '编辑设备'
            this.name = JSON.parse(localStorage.getItem('voiceItem')).name
            this.deviceId = JSON.parse(localStorage.getItem('voiceItem')).device_no || this.$route.query.code
            this.status = JSON.parse(localStorage.getItem('voiceItem')).status
            this.ids = JSON.parse(localStorage.getItem('voiceItem')).id
        }
    },
    beforeDestroy() {
        // if (this.html5QrCode) {
        // }
    },
    methods: {
        onSubmit() {
            if (this.name == '') {
                this.$toast('请输入水机名称');
                return
            }
            // if(this.deviceId == ''){
            //     this.$toast('请扫描获取设备号');
            //     return
            // } 
            let params = {
                type: 1,
                name: this.name,
                device_no: this.deviceId,
                status: this.status,
            }
            if (this.voiceItem.filg == 0) {
                let data = {
                    id: this.ids,
                    name: this.name,
                    status: this.status,
                }
                if (this.msg == 1) {
                    this.$http.post(`/store/manage/${this.id}/water_device_update`, data)
                        .then(res => {
                            this.$toast.success('操作成功');
                            // this.$router.back();
                            this.$router.replace(`/shopSettleVoiceDevice?id=${this.id}&msg=${this.msg}`);
                            localStorage.removeItem('voiceItem')

                        })
                } else {
                    this.$http.post(`/store/manage/${this.id}/voice_device_update`, data)
                        .then(res => {
                            this.$toast.success('操作成功');
                            // this.$router.back();
                            this.$router.replace(`/shopSettleVoiceDevice?id=${this.id}&msg=${this.msg}`);
                            localStorage.removeItem('voiceItem')

                        })
                }

            } else {
                if (this.msg == 1) {
                    this.$http.post(`/store/manage/${this.id}/water_device_add`, params)
                        .then(res => {
                            this.$toast.success('操作成功');
                            // this.$router.back();
                            this.$router.replace(`/shopSettleVoiceDevice?id=${this.id}&msg=${this.msg}`);
                            localStorage.removeItem('voiceItem')

                        })
                } else {
                    this.$http.post(`/store/manage/${this.id}/voice_device_add`, params)
                        .then(res => {
                            this.$toast.success('操作成功');
                            // this.$router.back();
                            this.$router.replace(`/shopSettleVoiceDevice?id=${this.id}&msg=${this.msg}`);
                            localStorage.removeItem('voiceItem')

                        })
                }

            }

        },
        Unbind() {
            let data = {
                id: this.ids,
            }
            if(this.msg==1){
                this.$http.post(`/store/manage/${this.id}/water_device_unbind`, data)
                .then(res => {
                    this.$toast.success('解绑成功');
                    this.$router.replace('/shopSettleVoiceDevice?id=' + this.id);
                    localStorage.removeItem('voiceItem')

                })
            }else{
                this.$http.post(`/store/manage/${this.id}/voice_device_unbind`, data)
                .then(res => {
                    this.$toast.success('解绑成功');
                    this.$router.replace('/shopSettleVoiceDevice?id=' + this.id);
                    localStorage.removeItem('voiceItem')

                })
            }
        },
        onClickLeft() {
            // this.$router.back();
            this.$router.replace(`/shopSettleVoiceDevice?msg=${this.msg}&id=${this.id}`)
            localStorage.removeItem('voiceItem')
        },
        switchChange(bol) {
            // Switch change logic
        },
        startScanning() {
            if (this.voiceItem.filg == 0) {
                return
            }
            let data = {
                name: this.name,
                deviceId: this.deviceId,
                status: this.status,
                ids: this.ids,
                filg: this.voiceItem.filg
            }
            localStorage.setItem('voiceItem', JSON.stringify(data))
            this.$router.push({ path: '/scanCode', query: { id: this.$route.query.id ,msg:this.msg} })
        }
    },

};
</script>

<style lang="scss">
.mine-shopsettle {
    min-height: 100vh;
    padding-top: 58px;
    box-sizing: border-box;
    background: #fff;

    .van-nav-bar .van-icon {
        color: #333333;
    }

    .van-nav-bar__arrow {
        font-size: 20px;
    }

    .tips {
        width: 95%;
        margin: 0.3rem auto;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.24rem;
        color: #666666;
        text-align: left;
    }
}

.popup_title {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
    padding: 0.72rem 0;
}

.popup_btn_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: .4rem;
    display: flex;
    justify-content: space-between;

    .popup_btn {
        width: 45%;
    }

}

.msg-title {
    text-align: left;
    padding: 0 0.2rem;
    font-size: 0.24rem;
}
</style>